<template>
  <div class="admin-login-box">
    <div class="admin-login-header-box">
      <div class="admin-login-header-center">
        管理中心 | 登录
      </div>
    </div>
    <div class="admin-login-content-box">
      <div class="admin-login-content">
        <div style="margin: 20px;"></div>
        <el-form label-position="right" label-width="80px">
          <el-form-item class="el-form-item_label" label="用户名" required>
            <el-input v-model="BlogUser.userName" placeholder="用户名/邮箱地址"></el-input>
          </el-form-item>
          <el-form-item class="el-form-item_label" label="密码" required>
            <el-input v-model="loginPassword" placeholder="请输入密码" type="password"></el-input>
          </el-form-item>
          <el-form-item class="el-form-item_label" label="验证码" required>
            <el-input v-model="loginInfo.captcha_code" placeholder="请输入右侧验证码" @keyup.enter="doLogin"></el-input>
          </el-form-item>
          <el-image :src="captchaPath" @click="updateVerifyCode" class="VerifyCode"/>
          <el-button type="primary" @click="doLogin" v-text="loginMessage" round v-loading="loading"
                     :disabled="loading">
          </el-button>
        </el-form>
      </div>
    </div>
    <div class="admin-login-footer"></div>
  </div>
</template>

<script>
import {doLogin} from "@/api/userApi.js";
import {hex_md5} from "@/api/md5.js";
import {ElMessage} from 'element-plus'

export default {
  name: "login",
  data() {
    return {
      loginPassword: "",
      BlogUser: {
        userName: '',
        password: ''
      },
      loginInfo: {
        captcha_code: '',
        from: ''
      },
      loading: false,
      loginMessage: "登 录",
      captchaPath: "",
      icon: ""
    }
  },
  methods: {
    toastEr(msg) {
      ElMessage({
        message: msg,
        center: true,
        showClose: true,
        type: "error"
      });
    },
    toastSu(msg) {
      ElMessage({
        message: msg,
        center: true,
        showClose: true,
        duration: 5000,
        type: "success"
      });

    },
    warning(msg) {
      ElMessage({
        message: msg,
        center: true,
        showClose: true,
        grouping: true,
        duration: 5000,
        type: "warning"
      });},
    doLogin() {
      if (this.BlogUser.userName === "") {
        this.warning("用户名不能为空")
        return;
      }
      if (this.loginPassword === "") {
        this.warning("密码不能为空");
        return;
      }
      if (this.loginInfo.captcha_code === "") {
        this.warning("验证码不能为空");
        return;
      }
      this.loading = true;
      this.BlogUser.password = hex_md5(this.loginPassword);
      doLogin(this.loginInfo.captcha_code, this.BlogUser).then(response => {
        this.loading = false;
        if (response.code >= 2000) {
          // 失败
          this.updateVerifyCode();
          this.loginInfo.captcha_code = '';
          this.loginPassword = '';
          ElMessage.error(response.message);
        }
        if (response.code < 2000) {
          //成功
          this.toastSu("尊敬的 " + this.BlogUser.userName + " ，" + response.message);
          sessionStorage.setItem('WEB_LOGIN_STATE', "true");
          this.$router.push("/index");
        }
      });
    },
    updateVerifyCode() {
      this.captchaPath = "/_api/user/utils/captcha_code?rm=" + Math.floor(Math.random() * 1000);
    }
  },
  mounted() {
    this.updateVerifyCode();
  }
}
</script>

<style scoped>
.admin-login-content-box .el-loading-mask {
  border-radius: 20px;
  line-height: 40px;
  font-size: 30px;
}

.VerifyCode {
  position: absolute;
  top: 170px;
  left: 480px;
  width: 200px;
  height: 40px;
  cursor: pointer;
  border: solid 1px #ded3d9;
}

.admin-login-box .el-button--primary {
  margin-left: 180px;
}

.admin-login-header-box {
  width: 100%;
  height: 60px;
  margin-bottom: 15px;
  background: #0fd7ff;
}

.admin-logo {
  float: left;
  width: 600px;
  font-size: 30px;
  text-align: right;
  line-height: 60px;
  margin-left: 20px;
  font-weight: 1000;
}

.admin-login-content-box {
  position: relative;
  width: 900px;
  margin: 0 auto;
  background: #f4f5f3;
  border-radius: 10px;
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .5);
}

.admin-login-content {
  padding: 20px 0px 20px 20px;
}

.admin-login-header-center {
  font-size: 25px;
  line-height: 60px;
  text-align: center;
}

.el-form-item_label, .el-form-item__label {
  width: 450px;
  margin-right: 0;
  background: #EBEEF5;
  text-align: center !important;
  padding: 0;
  border: solid #EBEEF5 1px;
}
</style>
